<script>
import starIcon from "../../../../static/star.png"
import starFillIcon from "../../../../static/starFill.png"
import request from "../../../../utils/request"
import persistence from "../../../../store/persistence"
import { showToast } from "@/utils"
import store from "../../../../store"
import { appActionType } from "@/store/modules/app"
export default {
  name: "collection",
  data() {
    return {
      starIcon,
      starFillIcon,
      isCollected: false,
    }
  },
  props: {
    isCollectedProps: {
      type: Boolean,
      default: false,
    },
    structureId: {
      type: String,
      default: "",
    },
  },
  watch: {
    isCollectedProps: {
      handler(val) {
        this.isCollected = val
      },
      immediate: true,
    },
  },
  methods: {
    async handleCollect() {
      //收藏
      if (!this.isCollected) {
        await request({
          url: "userTopicFavorites/saveFavorites",
          data: {
            structureId: this.structureId,
          },
          errorHandle: true,
        })
        if (store.getters[appActionType.getters.getFirstCollection]) {
          showToast.default("可在 我的 - 我的收藏 中查看")
          store.commit(appActionType.mutations.setFirstCollection, false)
        }
        this.isCollected = true
        //取消收藏
      } else {
        await request({
          url: "userTopicFavorites/cancelFavorites",
          data: {
            ids: [this.structureId],
          },
        })
        this.isCollected = false
      }
    },
  },
}
</script>

<template>
  <view class="component" @click="handleCollect">
    <!--		还未收藏-->
    <image class="icon" :src="starIcon" v-if="!isCollected"></image>
    <!--		已经收藏-->
    <image class="icon" :src="starFillIcon" v-else></image>
    <view class="text">收藏</view>
  </view>
</template>

<style scoped lang="scss">
.component {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  > .icon {
    width: calc(50rpx * var(--font-size-rate));
    height: calc(50rpx * var(--font-size-rate));
  }
  > .text {
    margin-top: calc(10rpx * var(--font-size-rate));
    font-size: calc(30rpx * var(--font-size-rate));
  }
}
</style>
